<template>
    <div style="display:flex;">
      <el-card shadow="always" style="width: 20%;margin-right: 20px;border-color:#9eea6a;">
        <el-tag type="success" style="margin-bottom: 4px">奖金修改</el-tag>
        <el-input style="margin-bottom: 4px;"
                  size="mini"
                  label="奖金"
                  disabled
                  :placeholder="initReword"></el-input>
        <el-input size="mini"
                  v-model="value1"
                  label="奖金"
                  onkeyup="this.value=this.value.replace(/\D|^0/g,'')"
                  placeholder="请输入要修改的金额...">{{value1}}</el-input>

        <el-button size="mini" style="margin-top: 4px" @click="cancelInputReword">清除</el-button>
        <el-button type="primary" size="mini" style="margin-top: 4px" @click="handleChangeByReword">确定</el-button>
        <el-button type="success" size="mini" style="margin-top: 4px" @click="doReword">重置</el-button>
      </el-card>
      <el-card style="display:flex;width: 20%;margin-right: 20px; border-color: #F56C6C;">
        <el-tag type="danger" style="margin-bottom: 4px">迟到罚金修改</el-tag>
        <el-input style="margin-bottom: 4px;"
                  size="mini"
                  disabled
                  :placeholder="initPunishment"></el-input>
        <el-input size="mini"
                  v-model="value2"
                  label="迟到罚金"
                  onkeyup="this.value=this.value.replace(/\D|^0/g,'')"
                  placeholder="请输入要修改的金额...">{{value2}}</el-input>
        <el-button size="mini" style="margin-top: 4px" @click="cancelInputPunishment">清除</el-button>
        <el-button type="primary" size="mini" style="margin-top: 4px" @click="handleChangeByPunishment">确定</el-button>
        <el-button type="success" size="mini" style="margin-top: 4px" @click="doPunishment">重置</el-button>
      </el-card>
      <el-card shadow="always" style="width: 20%;margin-right: 20px;border-color:#409eff;">
        <el-tag type="primary" style="margin-bottom: 4px">请假规则修改</el-tag>
        <el-input style="margin-bottom: 4px;"
                  size="mini"
                  label="请假罚金"
                  disabled
                  placeholder="当前每月允许请假次数为 2 次"></el-input>
        <el-input style="margin-bottom: 4px;"
                  size="mini"
                  label="每月允许请假次数"
                  disabled
                  :placeholder="initLeave"></el-input>
        <el-input size="mini"
                  style="margin-bottom: 4px"
                  label="请假次数"
                  onkeyup="this.value=this.value.replace(/\D|^0/g,'')"
                  placeholder="请输入每月员工允许请假次数"></el-input>
        <el-input size="mini"
                  v-model="value3"
                  label="请假罚金"
                  onkeyup="this.value=this.value.replace(/\D|^0/g,'')"
                  placeholder="请输入要修改的金额...">{{value3}}</el-input>
        <el-button size="mini" style="margin-top: 4px" @click="cancelInputLeave">清除</el-button>
        <el-button type="primary" size="mini" style="margin-top: 4px" @click="handleChangeByLeave">确定</el-button>
        <el-button type="success" size="mini" style="margin-top: 4px" @click="doLeave">重置</el-button>
      </el-card>
    </div>
</template>

<script>
    export default {
      data(){
        return {
          // 设置placeholder
          initReword:'',
          initPunishment:'',
          initLeave: '',
          rewordRules:{
            id: 1,
            reword:'',
            punishment:'',
            leave:''
          },
          value1:'',
          value2:'',
          value3:''
        }
      },
      created() {
        this.loadEcData();
      },
      methods:{
        // 重置金额 默认奖金100；罚金80
        doReword() {
          this.rewordRules.reword = 100;
          this.putRequest("/system/basic/rules/reword", this.rewordRules).then(resp=> {
            if (resp && resp.status === 200) {
              this.loadEcData();
            }
          });
        },
        doPunishment() {
          this.rewordRules.punishment = 80;
          this.putRequest("/system/basic/rules/punishment", this.rewordRules).then(resp=> {
            if (resp && resp.status === 200) {
              this.loadEcData();
            }
          });
        },
        doLeave() {
          this.rewordRules.leave = 50;
          this.putRequest("/system/basic/rules/leave", this.rewordRules).then(resp=> {
            if (resp && resp.status === 200) {
              this.loadEcData();
            }
          });
        },
        loadEcData(){
          this.getRequest("/system/basic/rules").then(resp=> {
            if (resp && resp.status === 200) {
              this.rewordRules.reword = resp.data.reword;
              this.rewordRules.punishment = resp.data.punishment;
              this.rewordRules.leave = resp.data.leave;
              this.initReword = resp.data.reword;
              this.initReword = "当前奖金为：" + this.initReword + "元 / 次"
              this.initPunishment = resp.data.punishment;
              this.initPunishment = "当前迟到罚金为：" + this.initPunishment + "元 / 次"
              this.initLeave = resp.data.leave;
              this.initLeave = "当前请假罚金为：" + this.initLeave + "元 / 次"
            }
          })
        },
        handleChangeByReword() {
          this.rewordRules.reword = this.value1;
          this.putRequest("/system/basic/rules/reword", this.rewordRules).then(resp=> {
            if (resp && resp.status === 200) {
              this.cancelInputReword();
              this.loadEcData();
            }
          });
        },
        handleChangeByPunishment() {
          this.rewordRules.punishment = this.value2;
          console.log(this.rewordRules.punishment)
          this.putRequest("/system/basic/rules/punishment", this.rewordRules).then(resp=> {
            if (resp && resp.status === 200) {
              this.cancelInputPunishment();
              this.loadEcData();
            }
          });
        },
        handleChangeByLeave() {
          this.rewordRules.leave = this.value3;
          console.log(this.rewordRules.leave)
          this.putRequest("/system/basic/rules/leave", this.rewordRules).then(resp=> {
            if (resp && resp.status === 200) {
              this.cancelInputLeave();
              this.loadEcData();
            }
          });
        },
        cancelInputReword() {
          this.value1 = '';
        },
        cancelInputPunishment() {
          this.value2 = '';
        },
        cancelInputLeave() {
          this.value3 = '';
        }
      }
    }
</script>

<style scoped>

</style>
